{% extends 'movies_base.html' %}
{% load static %}
{% block head %}

{% endblock %}
{% block title %}
电影搜索
{% endblock %}
{#<form method="post" enctype="multipart/form-data">#}
    {# {% csrf_token %}#}
    {# <div class="form-group">#}
        {# <label for="nickname">昵称</label>#}
        {# <input type="text" name="nickname" id="nickname" value="{{ user_profile.nickname }}">#}
        {# </div>#}
    {# <div class="form-group">#}
        {# <label for="bio">个性签名</label>#}
        {# <textarea name="bio" id="bio">{{ user_profile.bio }}</textarea>#}
        {# </div>#}
    {# <div class="form-group">#}
        {# <label for="avatar">头像</label>#}
        {# <input type="file" name="avatar" id="avatar">#}
        {# </div>#}
    {# <div class="form-group">#}
        {# <label for="background_image">背景图片</label>#}
        {# <input type="file" name="background_image" id="background_image">#}
        {# </div>#}
    {# <input type="submit" value="保存修改">#}
    {#</form>#}

{% block body %}
<div class="movie-search-container">

    <div class="container-lg">
        <h2>搜索电影</h2>
        <form action="{% url 'movies_results' %}" method="get">
            <div class="form-group">
                <label for="s" style="font-size: 20px"><strong>电影标题:</strong></label>
                <input type="text" id="s" name="s" class="form-control" placeholder="输入电影标题">
            </div>
            <div class="form-group">
                <label for="type" style="font-size: 20px"><strong>电影类型:</strong></label>
                <select id="type" name="type" class="form-control">
                    <option value="">电影名搜索</option>
                    <option value="new">最新电影</option>
                    <option value="top">高分电影</option>
                    <option value="tag">标签搜索</option>
                </select>
            </div>
            <div class="form-group">
                <label for="category-select" style="font-size: 20px"><strong>标签类别:</strong></label>
                <select id="category-select" class="form-control">
                    {% for category in categories %}
                    <option value="{{ category }}">{{ category }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="tag-select" style="font-size: 20px"><strong>标签:</strong></label>
                <select id="tag-select" name="tags" class="form-control" multiple>
                </select>
                <small class="form-text text-muted">按住 Ctrl (Windows) 或 Command (Mac) 键来选择多个标签。</small>
            </div>
            <div class="form-group">
                <label for="year">年份:</label>
                <input type="text" id="year" name="year" class="form-control" placeholder="输入年份">
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>

</div>
<script src="{% static 'js/jquery-3.7.1.js' %}"></script>
<!-- Add more sections as needed -->
<script>
    function confirmDelete() {
        // 使用 confirm 函数弹出确认对话框
        const result = confirm("是否删除？");
        if (result) {
            document.getElementById("deleteForm").submit();
        } else {
            // 用户点击了取消（否），在这里不执行任何提交表单的操作
        }
    }
    $(document).ready(function () {
        $('#category-select').on('change', function () {
            var category = $(this).val();
            $.ajax({
                url: '{% url "get_tag_options" %}',
                data: { 'category': category },
                success: function (response) {
                    $('#tag-select').empty();
                    $.each(response.tag_options, function (index, item) {
                        $('#tag-select').append(new Option(item.value, item.id));
                    });
                }
            });
        });
    });
</script>
{% endblock %}